import Taro from '@tarojs/taro'
import { AtTabBar, AtIcon } from 'taro-ui'
import { View, Text, Input, Image,ScrollView } from '@tarojs/components'
import classNames from "classnames";
import { ComponentClass, Component } from 'react'
import './index.scss'
type IState = {
    
    searchText:string,
}
type IProps = {
    isBack, leftIcon, title, background, color, center, search, searchStyle, fixed, height, headerRight
}
export default class NavBarUg extends  Component<IProps,IState> {
     // 默认配置
     static defaultProps = {
        isBack: false,
        leftIcon: '\ue84c',
        title: ' ',
        background: '#6190e8',
        color: '#fff',
        center: false,
        search: false,
        searchStyle: '',
        fixed: false,
        headerRight: [],
    }
    constructor(props) {
        super(props)
        this.state = {
            searchText: '',
        }
    }
    handleNavigateBack=()=>{
        
    }
    render() {
        const { isBack, leftIcon, title, background, color, center, search, searchStyle, fixed, height, headerRight } = this.props
        const { searchText } = this.state
        
        let weapp = false
        if (process.env.TARO_ENV === 'weapp') {
            weapp = true
        }
        return (
            <View className={classNames('taro__navbar', fixed && 'taro__navbar--fixed', fixed && weapp && 'taro__navbar-weapp--fixed')}>
            <View className={classNames('taro__navbar-wrap', fixed && 'taro__navbar-wrap--fixed', weapp && 'taro__navbar-wrap__weapp')} style={{backgroundColor: background}}>
                {/* TouchView  activeOpacity={.5}*/}
                <View className={classNames('taro__navbar-left__view', isBack && 'taro__navbar-left__view--isback')}>
                {isBack &&
                    <View  
                    onClick={this.handleNavigateBack}>
                        <View className="taro__navbar-icon__item"><Text className="iconfont taro__navbar-iconfont" style={{color: color}}>{leftIcon}</Text></View>
                    </View>
                }
                </View>
                
                {/* 标题 */}
                {!search && center && !weapp ? <View className="flex1" /> : null}
                {search ? 
                (
                    <View className="taro__navbar-search flex1">
                        <Input className="taro__navbar-search__input" placeholder="搜索..." 
                        // onInput={this.updateInputText} 
                        style={{color: color, ...searchStyle}} />
                    </View>
                )
                :
                (
                    <View className={classNames('taro__navbar-title flex1', center && !weapp && 'taro__navbar-title--center')}>
                        {title && <Text className="taro__navbar-title__text" style={{color: color}}>{title}</Text>}
                    </View>
                )
                }

                {/* 右侧 */}
                <View className="taro__navbar-right__view">
                {headerRight.map((item, index) => (
                    <View key={index} onClick={()=>item.onClick && item.onClick(searchText)}>
                        <View className="taro__navbar-icon__item">
                            {item.icon && <Text className="iconfont taro__navbar-iconfont" style={{color: color, ...item.style}}>{item.icon}</Text>}
                            {item.text && <Text className="taro__navbar-iconfont__text" style={{color: color, ...item.style}}>{item.text}</Text>}
                            {item.img && <Image className="taro__navbar-iconfont__img" src={item.img} mode='aspectFit' />}
                            {/* 圆点 */}
                            {!!item.badge && <Text className="taro__badge taro__navbar-badge">{item.badge}</Text>}
                            {!!item.dot && <Text className="taro__badge-dot taro__navbar-badge--dot"></Text>}
                        </View>
                    </View>
                ))
                }
                </View>
            </View>
        </View>
        )
    }
}